var app = angular.module('myApp', []);

app.directive('expander', function() {
	return {
		'restrict': 'EA', //E:元素，<myDirect></myDirect>;A:属性，<div myDirect></div>;C:样式，<div class="myDirect"></div>;M:注释，<!-- directive: myDirect -->
		
		replace: true,//替换当前标签
		transclude: true,//保留标签内的内容，在模板中使用<span ng-transclude></span>注明原始内容保留在哪
		scope: {
			subtitle : '=expanderTitl'
		},
		template: '<div><div class="title" ng-click="toggle()">{{subtitle}}</div><div class="body" ng-show="showMe" ng-transclude></div></div>', //模板
		link : function(scope, element, attrs){
			scope.showMe = false;
			scope.toggle = function toggle(){
				scope.showMe = !scope.showMe;
			}
		}
	};
});

app.controller('firstController', function($scope) {
	$scope.title = '点击展开';
	$scope.text = '这里是内部的内容。';
});